import React from "react";
import "./index.scss";
const HomeSkeleton = props => {
	const { load, children } = props;
	if (load) {
		return (
			<>
				<div className="home-skeleton">
					<div className="home-skeleton-notification"></div>
					<div className="home-skeleton-top">
						<div className="home-skeleton-top-able"></div>
						<div className="home-skeleton-top-quota"></div>
						<div className="home-skeleton-top-bill">
							<div className="home-skeleton-top-bill-item"></div>
							<div className="home-skeleton-top-bill-item"></div>
						</div>
					</div>
					<div className="home-skeleton-middle">
						<div className="home-skeleton-middle-item"></div>
						<div className="home-skeleton-middle-item"></div>
						<div className="home-skeleton-middle-item"></div>
						<div className="home-skeleton-middle-item"></div>
						<div className="home-skeleton-middle-item"></div>
						<div className="home-skeleton-middle-item"></div>
					</div>
					<div className="home-skeleton-bottom">
						<div className="home-skeleton-bottom-title"></div>
						<div className="home-skeleton-bottom-banner"></div>
					</div>
				</div>
			</>
		);
	}

	return children;
};
export default HomeSkeleton;
